<!-- 运费模板添加&修改 -->
<template>
  <el-dialog
    :visible="showDialog"
    :title="title"
    :close-on-click-modal="false"
    class="dialog"
    width="40%"
    @open="openDialog"
    @close="closeDialog"
  >
    <!-- 表单内容 -->
    <el-form
      ref="form"
      label-width="100px"
      :model="formData"
      :rules="rules"
      class="form"
    >
      <el-form-item
        label="模板类型"
        prop="templateType"
      >
        <el-select
          v-model="formData.templateType"
          placeholder="请选择模板类型"
          style="width: 100%"
        >
          <el-option
            v-for="item in yjType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="运送类型"
        prop="transportType"
      >
        <el-select
          v-model="formData.transportType"
          placeholder="请选择运送类型"
          style="width: 100%"
        >
          <el-option
            v-for="item in ysType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="关联城市"
        prop="associatedCityList"
      >

        <el-checkbox-group
          v-if="formData.templateType===3"
          v-model="formData.associatedCityList"
          @change="handlechange"
        >
          <el-checkbox
            v-for="item in cityType.filter(el=>el.value !==1)"
            :key="item.value"
            :label="item.value"
          >{{ item.label }}</el-checkbox>
        </el-checkbox-group>
        <span v-else>全国</span>
      </el-form-item>
      <el-form-item
        label="首重价格"
        prop="firstWeight"
      >
        <el-input v-model="formData.firstWeight">
          <i
            slot="suffix"
            class="biaoqian"
          >
            元
          </i>
        </el-input>
      </el-form-item>
      <el-form-item
        label="续重价格"
        prop="continuousWeight"
      >
        <el-input v-model="formData.continuousWeight">
          <i
            slot="suffix"
            class="biaoqian"
          >
            元
          </i>
        </el-input>
      </el-form-item>
      <el-form-item
        label="轻抛系数"
        prop="lightThrowingCoefficient"
      >
        <el-input v-model="formData.lightThrowingCoefficient" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div style="text-align: center;">
        <el-button
          type="primary"
          @click="commit"
        >确认</el-button>
        <el-button
          @click="closeDialog"
        >取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { freightManageOperate } from '@/api/transit'
export default ({
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    yjType: {
      type: Array,
      default: () => []
    },
    ysType: {
      type: Array,
      default: () => []
    },
    cityType: {
      type: Array,
      default: () => []
    },
    newForm: {
      type: Array,
      default: () => []
    },
    newdata: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      formData: {
        templateType: '',
        associatedCityList: [1],
        transportType: '',
        firstWeight: '',
        continuousWeight: '',
        lightThrowingCoefficient: ''
      },
      rules: {
        templateType:
        { required: true, message: '模板类型不能为空', trigger: 'blur' },
        transportType:
        { required: true, message: '运送类型不能为空', trigger: 'blur' },
        firstWeight: [
          { required: true, message: '首重不能为空', trigger: 'blur' },
          { validator: this.validateFw, trigger: 'blur' }
        ],
        continuousWeight: [
          { required: true, message: '续重不能为空', trigger: 'blur' },
          { validator: this.validateCw, trigger: 'blur' }
        ],
        lightThrowingCoefficient: [
          { required: true, message: '轻抛不能为空', trigger: 'blur' },
          { validator: this.validateLT, trigger: 'blur' }
        ],
        associatedCityList:
        { required: true, message: '关联城市不能为空', trigger: 'blur' }
      }
    }
  },
  computed: {
    title() {
      if (this.newdata.id) {
        return '编辑'
      } else {
        return '添加'
      }
    }
  },
  methods: {
    openDialog() {
      if (this.title === '编辑') {
        this.formData = { ...this.newdata }
        console.log(this.formData)
        this.formData.associatedCityList = this.formData.associatedCityList.map(item => +item)
      } else {
        delete this.formData.id
      }
    },
    // 轻抛
    validateLT(rule, value, callback) {
      if (value) {
        const reg = /^[0-9]*[1-9][0-9]*$/
        const reg2 = /^[1-9]{1}\d{0,4}$/
        if (!reg.test(value)) {
          callback('只能是正整数')
        } if (!reg2.test(value)) {
          callback('轻抛系数必须小于等于99999')
        } else {
          callback()
        }
      } else {
        callback('轻抛不能为空')
      }
    },
    // 续重校验
    validateCw(rule, value, callback) {
      if (value) {
        const reg = /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/
        const reg2 = /^[1-9]([0-9]{1,2})?(\.[1-9])?$/
        if (!reg.test(value)) {
          callback('只能是数字和两位小数')
        } if (!reg2.test(value)) {
          callback('续重价格必须小于等于999.9')
        } else {
          callback()
        }
      } else {
        callback('续重不能为空')
      }
    },
    // 校验首重
    validateFw(rule, value, callback) {
      if (value) {
        const reg = /^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/
        const reg2 = /^[1-9]([0-9]{1,2})?(\.[1-9])?$/
        if (!reg.test(value)) {
          callback('只能是数字和两位小数')
        } if (!reg2.test(value)) {
          callback('首重价格必须小于等于999.9')
        } else {
          callback()
        }
      } else {
        callback('首重不能为空')
      }
    },

    // 增加
    commit() {
      this.$refs.form.validate(async flag => {
        if (!flag) return

        if (this.formData.id) {
          await freightManageOperate(this.formData)
        } else {
          await freightManageOperate(this.formData)
        }

        this.$message.success('操作成功')
        this.closeDialog()
        this.$emit('Success')
      })
    },

    // 关闭
    closeDialog() {
      this.formData = {
        templateType: '',
        transportType: '',
        firstWeight: '',
        continuousWeight: '',
        lightThrowingCoefficient: '',
        associatedCityList: [1],
        id: ''
      }
      this.$emit('update:newdata', {})
      this.$refs.form.resetFields()
      this.$emit('update:showDialog', false)
    },
    handlechange(val) {
      console.log(val)

      this.formData.associatedCityList = val.filter(item => item !== 1)
      // this.formData.associatedCityList = this.formData.associatedCityList.map(item => toString(item))
    }
  }
})
</script>

